<template>
  <el-menu :default-active="opens" class="el-menu-vertical-demo" :collapse="isCollapse"
           background-color="transparent"
           text-color="#fff"
           active-text-color="#ffd04b"
           router
  >
<!--    <button @click="rrrr">222</button>-->
    <div style="height: 60px; line-height: 60px; text-align: center">
      <img src="../assets/image/Home/logo.png" style="width: 30px; position: relative; top: 9px; margin-right: 4px">
      <b style="color: #fff" v-show="logoTextShow">大数据可视化系统</b>
    </div>
    <div>
      <div v-for="item in menus" :key="item.id">
        <div v-if="item.path" >
          <el-menu-item :index="item.path" @click.native="toNotifyHandle" >
            <i :style="{color:'#00CCFF'}" :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </div>
        <div v-else>
          <el-submenu :index="item.id + ''">
            <template slot="title">
              <i :style="{color:'#00CCFF'}" :class="item.icon"></i>
              <span slot="title"><span v-if="isCollapse===false"></span><span v-else-if="isCollapse===true">&nbsp;&nbsp;&nbsp;&nbsp;</span>{{ item.name }}</span>
            </template>
            <div  v-for="subItem in item.children" :key="subItem.id">
              <el-menu-item :index="subItem.path" >
                <i :style="{color:'#00CCFF'}" :class="subItem.icon"></i>
                <span slot="title">{{ subItem.name }}</span>
              </el-menu-item>
            </div>
          </el-submenu>
        </div>
      </div>
<!--      {{isCollapse}}?数据可视化:&nbsp;&nbsp;&nbsp;&nbsp;-->
      <el-submenu index="3-1">
        <span slot="title"><i :style="{color:'#00CCFF'}" class="el-icon-magic-stick"></i><span v-if="isCollapse===false">数据可视化</span><span v-else-if="isCollapse===true" >&nbsp;&nbsp;&nbsp;&nbsp;数据可视化</span></span>
        <el-submenu index="3-1-1">
          <span slot="title"><i :style="{color:'#00CCFF'}" class="el-icon-more"></i>点可视化</span>

          <!--<el-menu-item index="/ScatterDiagram">-->
          <!--  <el-tooltip class="item" effect="dark" :content="scatter" placement="right">-->
          <!--    <span>散点图</span>-->
          <!--  </el-tooltip>-->
          <!--</el-menu-item>-->

          <el-menu-item index="/Scatter">
            <el-tooltip class="item" effect="dark" :content="scatter" placement="right">
              <span>散点图</span>
            </el-tooltip>
          </el-menu-item>

          <el-menu-item index="/Hot">
            <el-tooltip class="item" effect="dark" :content="hot" placement="right">
              <span>热力图</span>
            </el-tooltip>
          </el-menu-item>

          <el-menu-item index="/HighAccuracyHot">
            <el-tooltip class="item" effect="dark" :content="hightAccuracyHot" placement="right">
              <span>高精热力图</span>
            </el-tooltip>
          </el-menu-item>

          <el-menu-item index="/Grid">
            <el-tooltip class="item" effect="dark" :content="grid" placement="right">
              <span>网格图</span>
            </el-tooltip>
          </el-menu-item>

          <el-menu-item index="/Svector">
            <el-tooltip class="item" effect="dark" :content="svector" placement="right">
              <span>向量场</span>
            </el-tooltip>
          </el-menu-item>

          <el-menu-item index="/ThreeDimensional">
            <el-tooltip class="item" effect="dark" :content="threeDimensional" placement="right">
              <span>三维柱状图</span>
            </el-tooltip>
          </el-menu-item>

          <el-menu-item index="/Aggregation">
            <el-tooltip class="item" effect="dark" :content="aggregation" placement="right">
              <span>聚合图</span>
            </el-tooltip>
          </el-menu-item>
          <!--                <el-menu-item index="/AddShapefile">添加shp文件</el-menu-item>-->
        </el-submenu>

        <el-submenu index="3-1-2">
          <span slot="title"><i :style="{color:'#00CCFF'}" class="el-icon-minus"></i>线可视化</span>
          <el-menu-item index="/taxiTrace">
            <el-tooltip class="item" effect="dark" :content="taxiTrace" placement="right">
              <span>三维轨迹图</span>
            </el-tooltip>
          </el-menu-item>
<!--          <el-menu-item index="/odLine">OD流飞线图</el-menu-item>-->
          <el-menu-item index="/odflyline">
            <el-tooltip class="item" effect="dark" :content="ODLine" placement="right">
              <span>OD流飞线图</span>
            </el-tooltip>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="3-1-3">
          <span slot="title"><i :style="{color:'#00CCFF'}" class="el-icon-picture-outline-round"></i>面可视化</span>
          <el-menu-item index="/Zone">
            <el-tooltip class="item" effect="dark" :content="Zone" placement="right">
              <span>底图数据叠加</span>
            </el-tooltip>
          </el-menu-item>
        </el-submenu>
      </el-submenu>
    </div>

<!--    </el-submenu>-->
  </el-menu>
</template>

<script>
export default {
  name: "Aside",
  props: {
    isCollapse: Boolean,
    logoTextShow: Boolean,
  },
  data(){
    return {
      // iconColor:true,
      menus: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")) : [],
      opens: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")).map(v => v.id + '') : [],
      scatter:'散点图是将所有的数据以点的形式展现在地图上,帮助我们从宏观的角度快速看出不同地理位置上数据的分布特征',
      hot: '热力图是使用不同的颜色表示车辆的密度，颜色越深表示车辆越密集。使用红色代表最高密度，蓝色或紫色代表最低密度',
      hightAccuracyHot: '高精热力图是使用不同的颜色表示车辆的密度，与普通热力图相比渲染效果更精细',
      grid: '网格图是将展示区域划分为100x100的网格，统计每个网格内的出租车数据数量，并对其进行展示，数量等级分为8个等级，将所输数据进行八等分，并以不同颜色进行展示',
      svector: '向量场是将车辆的运动方向和速度以向量的形式处理和投影计算，绘制流线完成向量场可视化模型，从而直观地反映出车辆的拥堵趋势、聚集状态等信息。',
      threeDimensional: '三维柱状图通过热力映射数据分布情况，颜色和高度体现出车辆密度。数量等级为5、10、20、30、40、50、80、100八个等级，分别用不同的颜色来表示。',
      aggregation: '聚合图将当前界面窗口60×60像素中的数据点的个数进行统计聚合，在每个单元格内显示颜色和数字，颜色深浅和数字代表对应单元格内数据的值大小。',
      taxiTrace: '三维轨迹图是根据车辆运行路线在地图上绘制出相应的三维路线图，同时定义状态的颜色赋给线路。',
      ODLine: 'OD流飞线图用于表示地理空间数据之间移动量的可视化方式',
      Zone:'将shp文件叠加显示在地图上'

    }
  },
  mounted() {
    console.log(this.menus,'this.menus');
    // if (this.user.nickname !== '管理员'){
    //   this.adminDisabled=true
    // }
  },
  // data(){
  //   return{
  //     user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
  //     adminDisabled:false
  //   }
  // },
  methods:{
    toNotifyHandle(){
      // this.iconColor = false
    }
  }
}
</script>


<style type="less">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;

}
.el-menu-vertical-demo{
  background-image: url("../assets/image/Home/zuo.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
/*rgba(40,140,234, 0.9))*/
/*  background-image: url("../assets/image/Home/zuo90.png");*/
}
.el-menu {
  height: 100%;
  border: none;
}
.el-menu-item{
  background-color: transparent !important;
}
.el-menu-item.is-active{
  background-color: transparent !important;
}
/*/deep/.el-menu .el-menu-item:hover{*/
/*  outline: 0 !important;*/
/*  color: #2E95FB !important;*/
/*  background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;*/
/*}*/
/*/deep/.el-menu .el-menu-item.is-active {*/
/*  color: #2E95FB !important;*/
/*  background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;*/
/*}*/
.el-submenu .el-submenu__title{
  background-color: transparent!important;
}
.el-submenu{
  .el-submenu .el-submenu__title{
    background-color: transparent!important;
  }
}
/*.el-submenu.el-submenu__title.el-menu-item {*/
/*  background-color: transparent!important;*/
/*}*/
::-webkit-scrollbar {
  width: 0 !important;
}

</style>